<template>
  <section class="flash-sale-section">
    <div class="flex justify-between items-center mb-4">
      <h2 class="text-2xl font-semibold">秒杀专区</h2>
      <a href="#" class="text-sm text-gray-500 hover:text-red-500">查看全部 &gt;</a>
    </div>
    
    <div class="grid grid-cols-5 gap-4">
      <!-- First card with countdown -->
      <div class="flash-sale-countdown bg-red-500 text-white rounded-lg p-4 flex flex-col justify-center items-center">
        <h3 class="text-xl font-bold mb-2">限时秒杀</h3>
        <div class="countdown-timer mb-4">
          <div class="text-2xl font-bold">{{ formattedTime }}</div>
          <div class="text-sm opacity-80">距离结束</div>
        </div>
        <div class="countdown-grid grid grid-cols-3 gap-2">
          <div class="countdown-item">
            <span class="block text-2xl font-bold">{{ hours }}</span>
            <span class="text-xs">时</span>
          </div>
          <div class="countdown-item">
            <span class="block text-2xl font-bold">{{ minutes }}</span>
            <span class="text-xs">分</span>
          </div>
          <div class="countdown-item">
            <span class="block text-2xl font-bold">{{ seconds }}</span>
            <span class="text-xs">秒</span>
          </div>
        </div>
      </div>

      <!-- Flash sale products -->
      <router-link
        v-for="product in flashSaleProducts"
        :key="product.id"
        :to="`/product/${product.id}`"
        class="product-item block bg-white border border-gray-200 rounded overflow-hidden hover:shadow-md transition-all duration-300 group"
      >
        <div class="block overflow-hidden h-48">
          <img :src="product.imgUrl" :alt="product.name" class="w-full h-full object-cover group-hover:scale-105 transition-transform duration-300" />
        </div>
        <div class="p-4 text-sm">
          <p class="text-gray-700 truncate mb-1 group-hover:text-red-500">{{ product.name }}</p>
          <div class="flex items-center justify-between">
            <p class="text-red-500 text-lg font-semibold">{{ formatPriceAuth(product.price, !!userStore.token) }}</p>
            <p class="text-gray-400 text-xs line-through">{{ formatPriceAuth(product.originalPrice, !!userStore.token) }}</p>
          </div>
          <div class="mt-2">
            <div class="w-full bg-gray-200 rounded-full h-2">
              <div class="bg-red-500 h-2 rounded-full" :style="{ width: `${product.soldPercentage}%` }"></div>
            </div>
            <p class="text-xs text-gray-500 mt-1">已售{{ product.soldPercentage }}%</p>
          </div>
        </div>
      </router-link>
    </div>
  </section>
</template>

<script setup lang="ts">
import { ref, computed, onMounted, onUnmounted } from 'vue'
import { useUserStore } from '@/stores/user'
import { formatPriceAuth } from '@/lib/utils'

interface FlashSaleProduct {
  id: number
  name: string
  price: string
  originalPrice: string
  imgUrl: string
  soldPercentage: number
}

const flashSaleProducts = ref<FlashSaleProduct[]>([
  {
    id: 301,
    name: '维生素D3软胶囊',
    price: '39.90',
    originalPrice: '59.90',
    imgUrl: 'https://picsum.photos/seed/vitamind/200/200',
    soldPercentage: 75
  },
  {
    id: 302,
    name: '钙镁片',
    price: '49.90',
    originalPrice: '79.90',
    imgUrl: 'https://picsum.photos/seed/calcium/200/200',
    soldPercentage: 60
  },
  {
    id: 303,
    name: '益生菌固体饮料',
    price: '69.90',
    originalPrice: '99.90',
    imgUrl: 'https://picsum.photos/seed/probiotic/200/200',
    soldPercentage: 85
  },
  {
    id: 304,
    name: '鱼油软胶囊',
    price: '89.90',
    originalPrice: '129.90',
    imgUrl: 'https://picsum.photos/seed/fishoil/200/200',
    soldPercentage: 45
  }
])

// Countdown timer logic
const endTime = ref(new Date().getTime() + 24 * 60 * 60 * 1000) // 24 hours from now
const timeLeft = ref(endTime.value - new Date().getTime())
let timer: number | null = null

const hours = computed(() => Math.floor(timeLeft.value / (1000 * 60 * 60)).toString().padStart(2, '0'))
const minutes = computed(() => Math.floor((timeLeft.value % (1000 * 60 * 60)) / (1000 * 60)).toString().padStart(2, '0'))
const seconds = computed(() => Math.floor((timeLeft.value % (1000 * 60)) / 1000).toString().padStart(2, '0'))
const formattedTime = computed(() => `${hours.value}:${minutes.value}:${seconds.value}`)

function updateTimer() {
  timeLeft.value = endTime.value - new Date().getTime()
  if (timeLeft.value <= 0) {
    timeLeft.value = 0
    if (timer) {
      clearInterval(timer)
    }
  }
}

const userStore = useUserStore()

onMounted(() => {
  timer = window.setInterval(updateTimer, 1000)
})

onUnmounted(() => {
  if (timer) {
    clearInterval(timer)
  }
})
</script>

<style scoped>
.flash-sale-countdown {
  min-height: 300px;
}

.countdown-item {
  background-color: rgba(255, 255, 255, 0.1);
  padding: 0.5rem;
  border-radius: 0.25rem;
  text-align: center;
}
</style> 